<template>
    <j-modal
            :title="title"
            :width="width"
            :visible="visible"
            switchFullscreen
            @ok="handleOk"
            :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
            @cancel="handleCancel"
            cancelText="取消绑定"
    >
        <div>
            <h2>请选择要绑定的车辆</h2>
            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
                    @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleOpen(record)">选择</a>
                    </span>
            </a-table>
        </div>
    </j-modal>
</template>

<script>
    import { httpAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    export default {
        name: 'HcCarUserModal',
        mixins: [JeecgListMixin, mixinDevice],
        data() {
            return {
                title: '',
                width: 800,
                visible: false,
                disableSubmit: false,

                form: {
                    carUserId: '',
                },
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        }
                    },
                    {
                        title: '车辆编号',
                        align: 'center',
                        dataIndex: 'id'
                    },
                    {
                        title: '车牌号',
                        align: 'center',
                        dataIndex: 'carNumber'
                    },
                    {
                        title: '备注',
                        align: 'center',
                        dataIndex: 'remark'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                url: {
                    list: '/hc/hcCar/list',
                    add: '/hc/hcCarUser/add',
                    edit: '/hc/hcCarUser/edit',
                    queryById: '/hc/hcCarUser/queryById'
                }
            }
        },
        methods: {
            initDictConfig() {
                // 根据当前用户去查询
                let userInfo = this.$store.getters.userInfo
                if (userInfo.companysId) {
                    this.queryParam.companysId = userInfo.companysId
                }
            },
            onSelectChange(selectedRowKeys, selectionRows) {
                this.selectedRowKeys = selectedRowKeys
            },
            handleOpen(record) {
                this.selectedRowKeys = [record.id]
            },
            add(userId) {
                this.edit({}, userId)
            },
            edit(record, userId) {
                this.visible = true
                // 收运员ID(用户ID)
                if (userId) {
                    this.form['carUserId'] = userId
                }
            },
            close() {
                this.visible = false;
                this.selectedRowKeys = [];
                this.form['carId'] = null;
            },
            // 进行数据提交
            handleOk() {
                if (!this.selectedRowKeys.length) {
                    this.$message.info('请选择绑定车辆')
                    return
                }
                const that = this
                let formData = Object.assign(this.form, {
                    carId : this.selectedRowKeys[0]
                })
                httpAction(this.url.add, formData, 'post').then((res) => {
                    if (res.success) {
                        that.$message.success(res.message)
                        this.submitCallback()
                    } else {
                        that.$message.warning(res.message)
                    }
                }).finally(() => {
                })
            },
            submitCallback() {
                this.close()
                this.$emit('ok')
            },
            handleCancel() {
                this.close()
                this.$emit('close')
            }
        }
    }
</script>
